<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>更多扩展插件</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=311"/>
    <link rel="stylesheet" href="../../assets/module/formSelects/formSelects-v4.css"/>
    <link rel="stylesheet" href="../../assets/module/city-picker/city-picker.css"/>
    <script src="../../assets/module/city-picker/city-picker.data.js"></script>
    <style>
        .btn-item {
            text-align: center;
            margin-top: 30px;
        }

        .btn-item .layui-btn {
            margin-right: 60px;
        }

        .btn-item .layui-btn:last-child {
            margin-right: 0px;
        }

        @media screen and (max-width: 450px) {

            .btn-item .layui-btn {
                margin-right: -5px;
            }
        }
    </style>
</head>
<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 180px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">加载层</div>
                <div class="layui-card-body" id="divLoading">
                    <p class="layui-text">
                        通过admin.showLoading()和admin.removeLoading()控制。
                    </p><br>
                    <button id="btnShowLoading1" class="layui-btn">显示加载层</button>
                    <button id="btnShowLoading2" class="layui-btn">样式二</button>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">省市区联动选择</div>
                <div class="layui-card-body layui-form">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0">
                            <input id="edtCity" class="layui-input" type="text" placeholder="输入选择城市"/>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">下拉表格选择器</div>
                <div class="layui-card-body">
                    <p class="layui-text">
                        此插件来自于社区，<a href="https://fly.layui.com/extend/tableSelect/" target="_blank">前往查看</a>。
                    </p><br>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0">
                            <input autocomplete="off" id="selTable" class="layui-input" type="text" placeholder="输选择"/>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

        <div class="layui-col-sm12 layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">多选下拉框</div>
                <div class="layui-card-body">
                    <p class="layui-text">
                        此插件来自于社区，<a href="https://fly.layui.com/extend/formSelects/" target="_blank">前往查看</a>。
                    </p><br>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">请选择：</label>
                        <div class="layui-input-inline mr0" style="width: 290px;">
                            <select name="city" xm-select="selDemo">
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">广州</option>
                                <option value="4">深圳</option>
                                <option value="5">天津</option>
                            </select>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['layer', 'form', 'admin', 'citypicker', 'formSelects', 'tableSelect', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var cityPicker = layui.citypicker;
        var formSelects = layui.formSelects;
        var tableSelect = layui.tableSelect;

        // 显示加载层
        $('#btnShowLoading1').click(function () {
            admin.showLoading('#divLoading', 1, '.9');
            setTimeout(function () {
                admin.removeLoading('#divLoading', true, true);
            }, 1000);
        });
        $('#btnShowLoading2').click(function () {
            admin.showLoading('#divLoading', 2, '.8');
            setTimeout(function () {
                admin.removeLoading('#divLoading', true, true);
            }, 1000);
        });

        // 城市选择器
        var cp = new cityPicker("#edtCity");
        cp.setValue("湖北省/武汉市/武昌区");

        // 下拉表格选择器
        tableSelect.render({
            elem: '#selTable',	// 定义输入框input对象
            checkedKey: 'userId', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            table: {
                url: '../../json/user.json',
                cellMinWidth: 100,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'username', sort: true, title: '账号'},
                    {field: 'nickName', sort: true, title: '用户名'},
                    {field: 'phone', sort: true, title: '手机号'},
                    {field: 'sex', sort: true, title: '性别'},
                    {field: 'roleName', sort: true, title: '角色'}
                ]]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var selVal = [];
                for (var i = 0; i < data.data.length; i++) {
                    selVal.push(data.data[i].nickName);
                }
                elem.val(selVal.join(','));
            }
        });

    });
</script>
</body>
</html>